<template>
  <div class="page-cont">
    <van-nav-bar
      title="随手拍"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- <van-tabs v-model="status">
      <van-tab
        title="质量问题"
        :name="1"
      />
      <van-tab
        title="安全问题"
        :name="2"
      />
    </van-tabs> -->
    <div class="list">
      <van-field
        v-model="form.qualityName"
        is-link
        readonly
        label="质量源"
        placeholder="请选择"
        input-align="right"
        @click="showOriginSelect = true"
      />
      <van-popup
        v-model="showOriginSelect"
        round
        position="bottom"
      >
        <van-cascader
          v-model="form.qualityId"
          title="请选择质量源"
          :options="originOption"
          @close="showOriginSelect = false"
          @finish="onOriginFinish"
        />
      </van-popup>
      <van-field
        class="cus-field"
        v-model="form.issueDescription"
        rows="3"
        label="问题描述"
        type="textarea"
        placeholder="请输入问题描述"
      />
      <div class="upload">
        <div class="tit">
          问题图片
        </div>
        <van-uploader
          :max-count="1"
          v-model="fileList"
          :after-read="afterRead"
        />
      </div>
      <action-select
        v-model="form.handleUserId"
        title="处理人"
        :list="usersOption"
      />
      <div class="btn">
        <van-button
          type="info"
          block
          @click="submit"
        >
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  name: "QuestionPage",
  components: {},
  data() {
    return {
      status: 0,
      originOption: [],
      usersOption: [],
      list: [],
      showOriginSelect: false,
      fileList: [],
      form: {
        imageUrl: "",
        issueDescription: "",
        qualityId: "",
        qualityName: "",
        handleUserId: "",
      },
    };
  },
  created() {
    let json = JSON.parse(this.$route.query.json);
    this.status = json.type;
    this.getOriginList().then(() => {
      this.$set(this, 'form', json);
    })
    this.fileList = [{url: json.imageUrl}];
    this.getUserList();
  },
  watch: {
    status() {
      this.getOriginList();
    },
  },
  methods: {
    async getUserList() {
      let data = await this.api.GET_QUESTION_USER_LIST(
        this.$store.state.user.userInfo.unitId
      );
      let list = [];
      Object.keys(data).forEach((id) => {
        list.push({
          value: id,
          label: data[id],
        });
      });
      this.$set(this, "usersOption", list);
    },
    async getOriginList() {
      this.$set(this.form, "qualityId", "");
      this.$set(this.form, "qualityName", "");
      this.$set(this, "originOption", []);
      this.$toast.loading({ message: "加载中...", forbidClick: true });
      const res = await this.api.GET_QUESTION_TYPE_LIST(this.status);
      this.$toast.clear();
      let option = [];
      res.list.forEach((item) => {
        let p = option.find((a) => a.text === item.parentName);
        if (!p) {
          p = { text: item.parentName, value: item.parentName, children: [] };
          option.push(p);
        }
        p.children.push({ text: item.qualityName, value: item.id });
      });
      this.$set(this, "originOption", option);
    },
    onOriginFinish(val) {
      this.$set(this.form, "qualityName", val.selectedOptions[1].text);
      this.showOriginSelect = false;
    },
    async afterRead(info) {
      this.$toast.loading({ message: "加载中...", forbidClick: true });
      let res = await this.api.UPLOAD_FILE(info.file);
      this.$toast.clear();
      this.$set(this.form, "imageUrl", res.url);
    },
    async submit() {
      // 判断
      if (!this.form.qualityId) return this.$toast.fail("请选择质量源");
      if (!this.form.issueDescription)
        return this.$toast.fail("请输入问题描述");
      if (!this.form.imageUrl) return this.$toast.fail("请上传图片");
      if (!this.form.handleUserId) return this.$toast.fail("请选择处理人");

      let data = _.cloneDeep(this.form);
      data.handleUserName = this.usersOption.find((a) => a.value === data.handleUserId).label;
      data.username = this.$store.state.user.userInfo.username;
      data.fieldId = this.$store.state.user.userInfo.unitId
      data.type = this.status;
      
      this.$toast.loading({message: "加载中...", forbidClick: true});
      await this.api.EDIT_QUESTION(data);
      this.$toast.clear();
      this.event.$emit('edit_question_ok', data)
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.cus-field {
  display: flex;
  flex-direction: column;
  ::v-deep {
    textarea {
      padding: 5px;
      background: #f1f1f1;
      border-radius: 4px;
    }
  }
}
.btn {
  padding: 10px 16px;
}
.upload {
  padding: 10px 16px;
  .tit {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
</style>
